<template>
    <div class="ticket-qcode">
        <div class="content">
           <div class="content-wapper">
              <img :src="this.imgUrl" class="head-img">
              <p>{{this.ticketName}}</p>
              <div class="qrcode" id="qrcode" ref="qrcode"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      buyid: "",
      codes: "",
      consumeid: "",
      ticketName: "",
      imgUrl: "",
      intervalId: -1000,
      leftTimes: -1,
      qrcode: null
    };
  },
  components: { QRCode },
  activated() {
    if (this.intervalId != -1000) {
      window.clearInterval(this.intervalId);
      this.intervalId = -1000;
    }
    this.leftTimes = -1;
    this.intervalId = setInterval(this.intervalHandle, 2000);
    this.buyid = this.$route.query.buyid;
    this.consumeid = this.$route.query.consumeid;
    this.ticketName = this.$route.query.ticketName;
    this.imgUrl = this.$route.query.icon;
    this.useqrcode();
  },
  deactivated() {
    if (this.intervalId != -1000) {
      this.leftTimes = 3;
    }
  },
  methods: {
    useqrcode() {
      let rem = parseFloat(
        window.getComputedStyle(document.documentElement)["fontSize"]
      );
      if (!this.qrcode)
        this.qrcode = new QRCode("qrcode", {
          width: 1.7 * rem, // 设置宽度
          height: 1.7 * rem // 设置高度
        });
      this.$nextTick(() => {
        
        let qrcodeStr = JSON.stringify({
          consumeid: this.consumeid,
          buyid: this.buyid,
          userid: this.userid
        });
        this.qrcode.makeCode(qrcodeStr);
      });
    },
    intervalHandle() {
      // this.$store.dispatch("toggleLoading", true);
      this.requestHandle();
    },
    requestHandle() {
      let usestr = "use:userid:" + this.userid + ":" + this.consumeid;
      this.$http
        .post(this.path + `store/Goods/couponstate_handle`, {
          hand: usestr
        })
        .then(response => {
          let data = response.body;
          if (data.status == "ok") {
            this.scanSuccessHandle();
          } else if (this.leftTimes != -1) {
            this.leftTimes--;
            if (this.leftTimes == 0) {
              window.clearInterval(this.intervalId);
              this.intervalId = -1000;
            }
          }
        });
    },
    scanSuccessHandle() {
      window.clearInterval(this.intervalId);
      this.intervalId = -1000;
      this.$store.commit("UPDATE_CONSUMEOKSHOW", true);
      // this.updatateUserInfo();
    }
  },
  computed: {
    ...mapState(["path", "icon", "gender", "userid"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.ticket-qcode {
  height: 100%;
  background-color: #515151;
  color: #595656;
  position: relative;

  .content {
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    top: 0.45rem;
    bottom: 0.45rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.04rem;

    .content-wapper {
      text-align: center;

      .head-img {
        // margin-top: 0.1rem;
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 0.04rem;
        border: 2px #BE8798 solid;
        box-shadow: 0 0px 1px rgba(0, 0, 0, 0.6);
      }

      p {
        margin-top: 0.06rem;
        font-size: 0.13rem;
        letter-spacing: 0.01rem;
      }

      .qrcode {
        margin-top: 0.36rem;
        display: inline-block;
      }
    }
  }
}
</style>
